<script setup>
import { ref, onMounted } from "vue";
import {
  PersonOutline,
  CalendarNumberOutline,
  ChevronForward,
  TimeOutline,
  SearchOutline,
  MailOutline
} from "@vicons/ionicons5";
import videoIcon from "../assets/video-icon.svg";
import { getRequest, postRequest } from "@/api";
import arrow from "../assets/class-arrow.png"
import Modal from "../common/Modal.vue"
import Chakanimg from '../assets/image.png.png'
import uservatar from "../assets/class-user.png"
import cleacder from "../assets/class-cleander.png"

const controls = ref(false);
const videoIcons = ref(true)
const videoPlayer = ref(null);
const videoUrl = 'https://media.w3.org/2010/05/sintel/trailer.mp4'
const currentDate = ref(''); // 当天日期
const currentYear = ref(''); // 年
const currentMonth = ref(''); // 月
const currentDay = ref(''); // 日
const imgDefultUrl = 'https://www.philhar.cn/upload/swiper/'
const classIrtems = ref({});
const bannsers = ref({});
const videos = ref({});
const pages = ref(0);
const pagetwoItems = ref({});
const caseShowItemBanner = ref({});


const isModalVisible = ref(false);
const opsition = ref('');
const modelPhoneNumber = ref('');
const position = ref('');

onMounted(() => {
  getCurrentDate();
  classroomRequest()
});

const classroomRequest = () => {
  getRequest('/course_index').then(res => {
    console.log('/course_index', res);
    classIrtems.value = res;
    bannsers.value = res.banner;
    videos.value = res.classroom;
  })
}




const classIrtemsClick = (item) => {
  const ids = item.id
  if (item.case_is_essay === 20) {
    pages.value = 1;
    window.scrollTo(0, 0);
    postRequest('/case_show', { id: ids }).then(res => {
      console.log('/case_show', res);
      pagetwoItems.value = res;
      caseShowItemBanner.value = res.case_top_images;
    })
  } else if (item.case_is_essay === 10) {
    window.open(item.case_url)
  }
}

const videoPlayClick = (index) => {
  const videoPlayer = document.getElementById('video' + index);
  if (videoPlayer) {
    videoPlayer.play();
    videos.value[index].playing = true;
    controls.value = true;
  }
};

const getCurrentDate = () => {
  const date = new Date();
  currentDate.value = date.toLocaleDateString(); // 获取当天日期
  currentYear.value = date.getFullYear(); // 获取年份
  currentMonth.value = date.getMonth() + 1; // 获取月份（注意加1，因为月份从0开始）
  currentDay.value = date.getDate(); // 获取日期
};

const backClick = () => {
  pages.value--;
  window.scrollTo(0, 0);
};


const options = [
  {
    label: "天山区",
    value: '天山区',
  },
  {
    label: '沙依巴克区',
    value: '沙依巴克区'
  },
  {
    label: '新市区',
    value: '新市区'
  },
  {
    label: "水磨沟区",
    value: '水磨沟区',
  },
  {
    label: '头屯河区',
    value: '头屯河区'
  },
  {
    label: '达坂城区',
    value: '达坂城区'
  },
  {
    label: '米东区',
    value: '米东区'
  },
  {
    label: '乌鲁木齐县',
    value: '乌鲁木齐县',
  },
];

const handlePositionChange = (e) => {
  const selectedValue = e.target.value;
  position.value = selectedValue
}

const modeSubClick = () => {
  const phoneNumber = document.getElementById('modelPhoneNumber').value.trim(); // 使用一个新的变量名，避免冲突
  const phoneRegex = /^1[3456789]\d{9}$/;
  if (phoneNumber && phoneRegex.test(phoneNumber)) {
    postRequest('/quote_message', {
      quote_area: position.value,
      quote_tel: phoneNumber // 直接使用新的变量名 phoneNumber
    }).then(res => {
      if (res.code === 200) {
        alert('成功');
        isModalVisible.value = false
      }
    });
  } else {
    alert('请输入正确的手机号');
  }
};

</script>

<template>
  <div class="classroom" v-if="pages === 0">
    <div class="top-img">
      <img :src="imgDefultUrl + bannsers.swiper_avatar" />
      <div class="img-content">
        <div style="color: rgba(255, 255, 255, 1);font-size: 4.5rem;font-weight: 700;">{{ bannsers.swiper_title }}</div>
        <div style="color: rgba(255, 255, 255, 1);font-size: 2.25rem;font-weight: 400;">点击下方专业客服为您解答</div>
        <div class="img-content-btn" @click="() => isModalVisible = true">
          <span>预约报名</span>
          <img :src="arrow" />
        </div>
      </div>
    </div>
    <div class="hengxian-box">
      <div class="hengxian">
      </div>
    </div>
    <div class="t-box">


      <div class="t-box-left">
        <div class="left-video-box" v-for="(video, index) in videos" :key="index">
          <video class="video" :id="'video' + index" :ref="'videoPlayer' + index" :controls="controls"
            :src="video.classroom_film" muted></video>
          <div v-if="!video.playing" class="video-play" @click="videoPlayClick(index)">
            <img :src="videoIcon">
          </div>
          <div v-if="!video.playing"
            style="width: 100%;display: flex;align-items: center;justify-content: center;position: absolute;margin-top: -9.375rem">
            <div class="video-title-box">
              <div class="title-box">
                <div class="user">

                  <img style="width: 1.3125rem;height: 1.3125rem" :src="uservatar">

                  <span style="font-size: 1.25rem;font-weight: 300;letter-spacing: .0625rem;">阿不都乃比</span>
                </div>
                <div class="time">

                  <img style="width: 1.4375rem;height: 1.4375rem" :src="cleacder">

                  <span style="font-size: 1.25rem;font-weight: 300;letter-spacing: .0625rem;">
                    {{ currentYear }}年{{ currentMonth }}月{{ currentDay }}日</span>
                </div>
              </div>
              <div style="font-size: 1.875rem;font-weight: 400;">设计室内效果图和讲解分析</div>
              <div style="font-size: 1.375rem;font-weight: 300;letter-spacing: .0625rem;">
                家庭办公室现在风靡一时。你的办公室可能是一家小企业的总部，也可能是相关文件或家庭作业的中心。保持这个地方的整洁固然重要，但让它看起来更美观对我们这些审美者来说更有价值。</div>
              <div class="arrowIcon">
                <span style="font-size: 1.375rem;font-weight: 500;">更多</span>
                <n-icon :component="ChevronForward" size="17" />
              </div>
            </div>
          </div>
        </div>
      </div>




      <div class="t-box-right">
        <div class="box-right-top">
          <div class="right-top-top">
            <div class="top-top-hr"></div>
            <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);font-weight: 400;letter-spacing: .0625rem;">搜索
            </div>
          </div>
          <div style="display: flex;">
            <n-input style="height: 4.125rem;display: flex;align-items: center;" status="warning" placeholder="" />
            <div
              style="width: 4.0625rem;height: 4.125rem;background: #F1891B;display: flex;align-items: center;justify-content: center;font-size: 1.6875rem;color: #fff;">
              <n-icon :component="SearchOutline" />
            </div>
          </div>
        </div>
        <div class="box-right-two">
          <div class="right-two-top">报价早知道 装修不踩坑</div>
          <div class="right-two-one-input">
            <n-input style="height: 4.71rem;display: flex;align-items: center;" v-model:value="value" size="large"
              status="warning" type="text" placeholder="" />
          </div>
          <div class="right-two-one-input">
            <n-input style="height: 4.71rem;display: flex;align-items: center;" v-model:value="value" size="large"
              status="warning" type="text" placeholder="" />
          </div>
          <div class="right-two-one-text">* 为了您的权益，您的隐私将被严格保密</div>
          <div class="right-two-one-btn">
            <button @click="() => isModalVisible = true">获取报价</button>
          </div>
        </div>
        <div class="box-right-three">
          <div class="right-three-top">
            <div></div>
            <span>最新文章</span>
          </div>
          <template v-for="(item, index) in classIrtems.newCase" :key="index">
            <div class="right-three-image">
              <div class="three-image-img">
                <img :src="imgDefultUrl + item.case_avatar">
              </div>
              <div class="three-image-text-box">
                <div class="image-text-box-top">{{ item.case_title }}</div>
                <div class="image-text-box-time">
                  <n-icon :component="TimeOutline" />
                  <div>{{ currentYear }} 年 {{ currentMonth }} 月 {{ currentDay }} 日</div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div class="right-subscribe-box">
          <div class="subscribe-box-top">
            <div></div>
            <span>订阅</span>
          </div>
          <div class="subscribe-box-input">
            <div style="display: flex;">
              <n-input style="height: 4.125rem;display: flex;align-items: center;" status="warning" placeholder="" />
              <div
                style="width: 4.0625rem;height: 4.125rem;background: #F1891B;display: flex;align-items: center;justify-content: center;font-size: 1.6875rem;color: #fff;">
                <n-icon :component="MailOutline" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 12.4169rem;width: 100%;text-align: center;font-size: 3.75rem;font-weight: 300;">
      装修效果图鉴赏</div>
    <div class="grig-box">
      <div class="grid-container">
        <div class=" grid-box" v-for="(item, index) in classIrtems.case" :key="index" @click="classIrtemsClick(item)">
          <img :src="imgDefultUrl + item.case_avatar" />
          <div class="grid-box-text">{{ item.case_title }}</div>
        </div>
      </div>
    </div>
  </div>

  <div class="caseShow" v-if="pages === 1">
    <div class="topimage">
      <img :src="Chakanimg">
      <div class="topimage-title">创建激励和服务的结构</div>
    </div>
    <div class="swiper-box">
      <div class="swiper">
        <n-carousel show-arrow :autoplay="true" :interval="3000">
          <template v-for="image in caseShowItemBanner">
            <img class="carousel-img" :src="imgDefultUrl + image">
          </template>
        </n-carousel>
      </div>
      <div class="swiper-content">
        <div style="font-size: 2.5rem;">{{ pagetwoItems.case_title }}</div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);">面积：{{ pagetwoItems.case_total_area }}平方米</div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);">建筑面积：{{ pagetwoItems.case_building_area }}平方米</div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);">层数：{{ pagetwoItems.case_floors }}</div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);">房间：{{ pagetwoItems.case_rooms }}</div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);">浴室：{{ pagetwoItems.case_bathrooms }}</div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);">位置：{{ pagetwoItems.case_location }}</div>
      </div>
    </div>
    <div class="item-content-box">
      <div class="content-title">项目概述</div>
      <div class="content-hr-hr"></div>
      <div style="width: 81.5%;" v-html="pagetwoItems.case_content"></div>
    </div>
    <div class="two-box-items">
      <div class="box-items-box">
        <div class="box-title">
          <div class="hengxian"></div>
          <div class="tiaozhan" style="margin-left: 1.875rem;">挑战</div>
        </div>
        <div class="box-two">住宅和场地本身必须是设计的出发点。我们感兴趣的是一种模糊了住宅/商业设计界限的住宅。我们希望住宅是一层楼。我们对商用工程建筑材料非常感兴趣，包括混凝土浇筑或钢结构。
        </div>
        <div class="box-three">
          <div class="three-item-box">
            <img :src="success">
            <span>建造具有现代设计元素和现代主义外观的房屋</span>
          </div>
          <div class="three-item-box">
            <img :src="success">
            <span>在不受干扰的自然环境中建造房屋</span>
          </div>
          <div class="three-item-box">
            <img :src="success">
            <span>让房屋充满阳光</span>
          </div>
        </div>
      </div>
      <div class="box-items-box">
        <div class="box-title">
          <div class="hengxian"></div>
          <div class="tiaozhan" style="margin-left: 1.875rem;">解决方案</div>
        </div>
        <div class="box-two">住宅和场地本身必须是设计的出发点。我们感兴趣的是一种模糊了住宅/商业设计界限的住宅。我们希望住宅是一层楼。我们对商用工程建筑材料非常感兴趣，包括混凝土浇筑或钢结构。
        </div>
        <div class="box-three">
          <div class="three-item-box">
            <img :src="success">
            <span>建造具有现代设计元素和现代主义外观的房屋</span>
          </div>
          <div class="three-item-box">
            <img :src="success">
            <span>在不受干扰的自然环境中建造房屋</span>
          </div>
          <div class="three-item-box">
            <img :src="success">
            <span>让房屋充满阳光</span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <button @click="backClick">更多案列</button>
    </div>
    <div class="bottom-add">
      <div class="add-title">我们的团队随时准备提供帮助。现在就联系我们，了解如何提供帮助。</div>
      <div class="lianxi" @click="() => isModalVisible = true">联系</div>
    </div>
  </div>


  <Modal :isVisible="isModalVisible" @close="hideBookingModal">
    <div class="prup">
      <div class="top">免费预约</div>
      <div class="p-content">
        <div class="position">
          <select class="select-item" @change="handlePositionChange">
            <option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option>
          </select>
        </div>
        <div class="numberinput">
          <input
            style="width: 37.375rem;height: 3.9419rem;display: flex;align-items: center;padding-left: .625rem;border: .0625rem solid rgba(128, 128, 128, 1);outline: none;"
            type="text" id="modelPhoneNumber" v-model="modelPhoneNumber" placeholder="请输入您的手机号码" />
        </div>
        <div class="sub-btn-box">
          <n-button style="height: 3.9375rem;width: 11.25rem;" ghost color="rgba(241, 137, 27, 1)"
            @click="modeSubClick">
            提交
          </n-button>
          <n-button style="height: 3.9375rem;width: 11.25rem;" ghost @click="() => isModalVisible = false">
            取消
          </n-button>
        </div>
      </div>
    </div>
  </Modal>

</template>

<style scoped lang="less">
.classroom {
  padding-top: 7.5rem;
  overflow: hidden;

  .top-img {
    width: 100%;
    height: 34.25rem;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .img-content {
      position: absolute;
      top: 50%;
      left: 25%;
      transform: translate(-50%, -50%);
      font-size: 1.5rem;
      height: 16.9375rem;
      width: 45rem;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      .img-content-btn {
        width: 17.9375rem;
        height: 4.4375rem;
        background: rgba(241, 137, 27, 1);
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        color: white;

        span {
          font-size: 1.875rem;
          font-weight: 500;
        }

        img {
          width: 3.1875rem;
          height: 1.0625rem;
        }
      }
    }
  }

  .hengxian-box {
    margin-top: 7.6875rem;
    width: 100%;
    height: .0625rem;
    display: flex;
    align-items: center;
    justify-content: center;

    .hengxian {
      width: 97.375rem;
      height: .125rem;
      background: rgba(166, 166, 166, 1);
    }
  }

  .t-box {
    margin-top: 4.125rem;
    width: 100%;
    height: 131.9375rem;
    display: flex;
    justify-content: space-evenly;

    .t-box-left {
      overflow-y: auto;
      width: 59.9375rem;
      height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      position: relative;


      .left-video-box {
        margin-bottom: 21.3125rem;
        position: relative;

        .video {
          width: 59.9375rem;
        }

        .video-play {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 7.375rem;
          height: 7.375rem;

          img {
            width: 7.375rem;
            height: 7.375rem;
          }
        }

        .video-title-box {
          width: 52.6875rem;
          height: 20.9169rem;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0rem .8125rem 1.6875rem -0.3125rem rgba(50, 50, 93, 0.25), 0rem .5rem 1rem -0.5rem rgba(0, 0, 0, 0.3);
          padding: 2.125rem 2.125rem 2.125rem 2.125rem;
          display: flex;
          justify-content: space-around;
          flex-direction: column;

          .title-box {
            width: 26.25rem;
            height: 1.5rem;

            display: flex;
            align-items: center;
            justify-content: space-between;

            .user {
              width: 8.2406rem;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: space-around;

              span {
                font-size: 1.25rem;
              }
            }

            .time {
              width: 12.4375rem;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: space-around;

              span {
                font-size: 1.25rem;
              }
            }
          }

          .arrowIcon {
            width: 3.8125rem;
            height: 1.625rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            color: rgba(241, 137, 27, 1);
          }
        }

      }
    }

    .t-box-right {
      height: 100%;

      .box-right-top {
        padding: 1.25rem;
        width: 29.9375rem;
        height: 11.5rem;
        border: .0625rem solid rgba(128, 128, 128, 1);
        display: flex;
        justify-content: space-around;
        flex-direction: column;

        .right-top-top {
          width: 12.3125rem;
          height: 2.25rem;
          display: flex;
          align-items: center;
          justify-content: space-around;

          .top-top-hr {
            width: 6.9375rem;
            height: .125rem;
            background: rgba(241, 137, 27, 1);
          }
        }
      }

      .box-right-two {
        margin-top: 1.875rem;
        width: 32.5625rem;
        height: 29.6875rem;
        border: .0625rem solid rgba(128, 128, 128, 1);
        display: flex;
        // align-items: center;
        justify-content: space-around;
        flex-direction: column;

        .right-two-top {
          width: 23.625rem;
          height: 2.6875rem;
          font-size: 2.25rem;
          font-weight: 500;
          padding-left: 4.4688rem;
        }

        .right-two-one-input {
          padding-left: 2rem;
          width: 28.5625rem;
          height: 4.71rem;
        }

        .right-two-one-text {
          height: 1.5rem;
          font-size: 1.25rem;
          color: rgba(128, 128, 128, 1);
          padding-left: 2rem;
          font-weight: 300;
        }

        .right-two-one-btn {
          width: 28.5625rem;
          height: 4.71rem;
          display: flex;
          justify-content: center;
          align-items: center;
          padding-left: 2rem;

          button {
            height: 100%;
            width: 100%;
            background-color: rgba(241, 137, 27, 1);
            border: none;
            color: rgba(255, 255, 255, 1);
            font-size: 2.25rem;
            font-weight: 400;
            text-align: center;
          }
        }
      }

      .box-right-three {
        margin-top: 3.6875rem;
        height: 51.375rem;
        border: .0625rem solid rgba(128, 128, 128, 1);
        padding: 1.875rem;
        width: 29.3125rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .right-three-top {
          width: 16.0625rem;
          height: 2.25rem;
          display: flex;
          align-items: center;
          justify-content: space-around;

          div {
            width: 6.9375rem;
            height: .125rem;
            background-color: rgba(241, 137, 27, 1);
          }

          span {
            font-size: 1.875rem;
            color: rgba(56, 56, 56, 1);
            font-weight: 400;
          }
        }

        .right-three-image {
          height: 13.3731rem;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;

          .three-image-img {
            width: 13.375rem;
            height: 13.3731rem;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .three-image-text-box {
            width: 13rem;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;

            .image-text-box-top {
              width: 100%;
              height: 100%;
              font-size: 1.5rem;
              font-weight: 400;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .image-text-box-time {
              width: 12.375rem;
              height: 1.5rem;
              display: flex;
              align-items: center;
              justify-content: space-around;
              font-size: 1.25rem;
              font-weight: 300;
            }
          }
        }
      }

      .right-subscribe-box {
        margin-top: 3.3125rem;
        padding: 1.875rem;
        width: 29.3125rem;
        height: 11.5rem;
        border: .0625rem solid rgba(128, 128, 128, 1);
        display: flex;
        justify-content: space-around;
        flex-direction: column;

        .subscribe-box-top {
          width: 12.3125rem;
          height: 2.25rem;
          display: flex;
          align-items: center;
          justify-content: space-around;

          div {
            width: 6.9375rem;
            height: .125rem;
            background: rgba(241, 137, 27, 1);
          }

          span {
            font-size: 1.875rem;
            font-weight: 400;
            color: rgba(56, 56, 56, 1);
          }
        }

        .subscribe-box-input {
          color: red
        }
      }
    }
  }

  .grig-box {
    width: 100%;
    height: 177.625rem;
    background-color: #fff;

    .grid-container {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      .grid-box {
        width: 31.5731rem;
        height: 52.875rem;
        background: rgba(255, 255, 255, 1);
        margin: .625rem;
        border: .0938rem solid rgba(0, 0, 0, 1);

        img {
          width: 31.5731rem;
          height: 42.0625rem;
        }

        .grid-box-text {
          width: 100%;
          height: 10.775rem;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2rem;
          color: rgba(0, 0, 0, 1);
        }
      }
    }
  }
}

.caseShow {
  padding-top: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;

  .topimage {
    width: 100%;
    height: 34.8125rem;
    position: relative;

    img {
      height: 100%;
      width: 100%;
    }

    .topimage-title {
      position: absolute;
      top: 60%;
      left: 20%;
      transform: translate(-50%, -50%);
      font-size: 3rem;
      color: #fff;
      width: 45rem;
      height: 5.3125rem;
      text-decoration: underline
    }
  }

  .swiper-box {
    padding: 1.875rem 0 1.875rem 0;
    position: relative;
    margin-top: 9.375rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .swiper {
      right: 15.625rem;
      position: relative;
      width: 66.71rem;
      height: 44.5rem;

      .carousel-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .swiper-content {
      position: absolute;
      left: 71.75rem;
      width: 37.0625rem;
      height: 32.5rem;
      background: rgba(250, 249, 245, 1);
      box-shadow: 0 1.875rem 3.75rem -0.75rem rgba(50, 50, 93, 0.25), 0 1.125rem 2.25rem -1.125rem rgba(0, 0, 0, 0.3);
      padding: 1.875rem;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
  }

  .item-content-box {
    padding: 1.875rem 0 1.875rem 0;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    flex-direction: column;

    .content-title {
      width: 97.5rem;
      font-size: 2.625rem;
    }

    .content-hr-hr {
      width: 97.5rem;
      height: .0625rem;
      background-color: rgba(241, 137, 27, 1);
    }
  }

  .two-box-items {
    display: flex;
    justify-content: space-evenly;
    /* 使得两个盒子之间有空间 */
    padding-top: 3.75rem;
    width: 100%;
    height: auto;
    // margin: 0 3.375rem;
    /* 控制整体容器的左右边距 */

    .box-items-box {
      padding-left: 4.0625rem;
      width: 43.75rem;
      height: 36.75rem;
      opacity: 1;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      background: rgba(250, 249, 245, 1);
      box-shadow: 0rem .125rem .3125rem -0.0625rem rgba(50, 50, 93, 0.25), 0rem .0625rem .1875rem -0.0625rem rgba(0, 0, 0, 0.3);

      .box-title {
        height: 2.9375rem;
        display: flex;
        align-items: center;

        .hengxian {
          width: 5.1875rem;
          height: .1875rem;
          opacity: 1;
          background: rgba(241, 137, 27, 1);
        }

        .tiaozhan {
          font-size: 2.5rem;
          font-weight: 500;
          letter-spacing: .0625rem;
          color: rgba(56, 56, 56, 1);
        }
      }

      .box-two {
        width: 42.75rem;
        height: 8.8125rem;
        font-size: 1.5rem;
        font-weight: 300;
        letter-spacing: .0625rem;
      }

      .box-three {
        width: 42.75rem;
        height: 8.8125rem;
        display: flex;
        justify-content: space-around;
        flex-direction: column;

        .three-item-box {
          width: 42.75rem;
          height: 2.9375rem;
          display: flex;
          align-items: center;
          // justify-content: space-evenly;

          img {
            width: .8125rem;
            height: .8125rem;
          }

          span {
            margin-left: 2.1875rem;
            width: 35.5625rem;
            font-size: 1.5rem;
            font-weight: 300;
            letter-spacing: .0625rem;
          }
        }
      }


    }
  }

  .btn-box {
    margin-top: 3.375rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    button {
      border: none;
      width: 15.125rem;
      height: 4.875rem;
      opacity: 1;
      font-size: 1.875rem;
      font-weight: 300;
      background: rgba(166, 166, 166, 1);
    }

    button:hover {
      background: rgba(241, 137, 27, 1);
      color: rgba(255, 255, 255, 1);
    }
  }

  .bottom-add {
    margin-top: 6.25rem;
    width: 100%;
    height: 9.75rem;
    opacity: 1;
    background: rgba(241, 137, 27, 1);
    display: flex;
    align-items: center;
    justify-content: space-around;

    .add-title {
      width: 69.75rem;
      height: 2.9375rem;
      font-size: 2.25rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }

    .lianxi {
      width: 15.125rem;
      height: 4.875rem;
      border: .125rem solid rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.125rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);

    }
  }
}

.prup {
  width: 43.75rem;
  height: 25rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;

  .top {
    width: 100%;
    height: 6.0625rem;
    background: rgba(56, 56, 56, 1);
    font-size: 2rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .p-content {
    width: 100%;
    height: 24.9375rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;

    .position {
      width: 37.375rem;
      height: 3.9419rem;

      .select-item {
        width: 100%;
        height: 100%;
        background-color: #fff;
      }
    }

    .numberinput {
      width: 37.375rem;
      height: 3.9419rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sub-btn-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }
}
</style>